<template>
  <div>
    <h5ve-dialog
      :title="title"
      :close-on-click-modal="false"
      :width="720"
      :isFooter="true"
      :show.sync="visible">
      <h5ve-generate-form
        v-if="visible"
        :option="options"
        :value="initData"
        :dict="dict"
        :readonly="method === 'view'"
        v-loading="loading"
        :class="method==='view'?'readonly':''"
        ref="generateForm"
      >
      </h5ve-generate-form>
      <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
          <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check">确定</el-button>
        </span>
    </h5ve-dialog>
  </div>
</template>

<script>
import {getByCode, genByCode, saveGenerate} from '@/api/toolkit/pageInfo'
import {mapGetters} from "vuex";

export default {
  components: {},
  data() {
    return {
      code: '',
      title: '',
      method: '',
      beanId: '',
      visible: false,
      loading: false,
      initData: {},
      dataBindMap: new Map(),
      options: {list: []}
    }
  },
  created() {
    this.createForm()
  },
  computed: {
    ...mapGetters([
      'dict'
    ])
  },
  methods: {
    init(method, beanId) {
      console.log(beanId)
      this.method = method
      this.beanId = beanId
      this.initData = {}
      if (method === 'add') {
        this.title = `新建`
      } else if (method === 'edit') {
        this.title = '修改'
      } else if (method === 'view') {
        this.title = '查看'
      }
      this.visible = true
      this.loading = false
      this.$nextTick(() => {
        this.$refs.generateForm.resetForm()
        if (beanId) {
          this.loading = true
          genByCode({code: this.code, id: beanId}).then(({data}) => {
            this.loading = false
            console.log(data)
            this.initData = data
          })
        }
      })
    },
    createForm() {
      const {path} = this.$route;
      if (path.indexOf('generate') === -1) {
        // 不是动态表单不加载
        return;
      }
      const routeStr = path.split("/");
      this.code = routeStr[routeStr.length - 1];
      getByCode({code: this.code}).then(response => {
        if (response.data && response.data.pageData) {
          this.options = JSON.parse(response.data.pageData)
          this.genRemarks()
        } else {
          this.options = {
            'column': []
          }
        }
        this.dataBindMap.clear()
        //this.generateModel(this.options.list)
      })
    },
    genRemarks() {
      this.options.column.push({
        "type": "textarea",
        "label": "备注",
        "color": "#409eff",
        "labelWidth": "",
        "hide": false,
        "handoff": true,
        "layout": 24,
        "hideLabel": false,
        "customClass": [],
        "dataType": "text",
        "dataLength": 0,
        "validateConfig": {
          "required": false,
          "pattern": false,
          "requiredMessage": "备注必填"
        },
        "events": {
          "change": "",
          "focus": "",
          "blur": ""
        },
        "plugin": {
          "type": "textarea",
          "value": "",
          "placeholder": "请输入备注",
          "readonly": false,
          "disabled": false,
          "customizeStyle": {
            "width": "100%"
          }
        },
        "isAdd": "1",
        "editReadonly": "0",
        "isEdit": "1",
        "isList": "1",
        "isQuery": "0",
        "isImport": "1",
        "queryType": "eq",
        "javaType": "String",
        "prop": "remarks"
      })
    },
    // 表单提交
    doSubmit() {
      this.loading = true
      this.$refs.generateForm.getData().then(data => {
        if (this.beanId) {
          data.id = this.beanId
        }
        saveGenerate({code: this.code, data: JSON.stringify(data)}).then(({data}) => {
          this.visible = false
          this.loading = false
          this.$message.success(data)
          this.$emit('refreshDataList')

        })
      }).catch(e => {
      })
    }
  }
}
</script>
